html, body{
    display: inline-block;
    text-align: center;
    height: 100%;
    margin: 0;
}


.page-header {
    width: 100%; 
    max-width: 100vw;
    overflow: hidden; 
}
.page-content {
    width: 100%; 
    max-width: 100vw;
    min-height: 100%;
    overflow: hidden; 
}
.page-footer {   
    width: 100%; 
    max-width: 100vw;
    overflow: hidden; 
    
    height: 75px;
    margin: -68px 0 -10px 0; 
    padding: 0 0 0 0;
}


.content-gallery, 
.content-contact, 
.content-resume  { 
    position: relative; 
    text-align: center;
    margin: 10px auto; 
    padding: 5px; 
    width: 95%;
    overflow-x: hidden; 
}

.content-resume {
    overflow: hidden; 
    width: 95%; 
    height: 75vh;
}

.content-contact {
    font-family: Verdana, Geneva, sans-serif;
}

.content-video, 
.content-slides,
.content-vimeo {
    display: inline-block;
    max-width: 100%; 
    width: 350px; 
    height: 200px; 
    background: black;
    overflow: hidden; 
}

.content-slides {
    position: relative; 
}

.content-vimeo {
    
}


.loading-img {
    position: absolute; 
    height: 200px;
    width: 250px; 
    margin: auto;
    left: 0; 
    right: 0;
    z-index: -10; 
}



.slides {
    width: 100%; 
    height: 200px; 
    max-height: 200px; 
    vertical-align: middle; 
    overflow: hidden; 
}

.slides-tall {
    max-height: 200px; 
    margin: auto;
    image-orientation: from-image;
}

.slide-arrow {
    position: absolute; 
    font-size: 24px;
    cursor: pointer; 
    color: #fff; 
    bottom: 0; 
}
.slide-arrow:hover{
    color: #b4aa50; 
}
.slide-arrow-right{
    right: 5px; 
    -webkit-user-select: none;
    user-select: none;
}
.slide-arrow-left{
    left: 5px; 
    -webkit-user-select: none;
    user-select: none;
}

.modal-badge-div {
    position: absolute; 
    bottom: 10px; 
    width: 100%; 
    height: 40px; 
}

.modal-badge {
    display: inline-block; 
    
    width: 13px; 
    height: 13px; 
    
    border-radius: 50%; 
    border: 1px solid #ccc;
    color: #fff; 
}

.visible {
    visibility: visible; 
}
.hidden {
    visibility: hidden; 
}

.slide-badge {
    position: relative; 
    display: inline-block; 
    width: 13px; 
    height: 13px; 
    bottom: 20px; 
    padding: 0px; 
    border-radius: 50%; 
    border: 1px solid #ccc;
    color: #fff; 
}
.modal-badge {
    
}
.slide-badge-solid,
.modal-badge-solid {
    background-color: #fff;
    color: #000;
}
.slide-badge:hover,
.modal-badge:hover {
    cursor: pointer; 
    background-color: #fff;
    color: #000;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  height: 100%; /* Full height */
  width: 100%; /* Full width */
  max-width: 100%; 
  left: 0;
  top: 0;
  z-index: 1; /* Sit on top */
}
.modal-content {
    width: 100%;
    height: 100%; 
}
.modal-image {    
    position:absolute;
    max-height: 80vh; 
    max-width: 95vw; 
    margin: auto;
    padding: 0; 
    top: 0; 
    left: 0; 
    right: 0;
    bottom: 0;
}
/*
    width: 95%;
    max-width: 800px; 
    padding: 100px; 
*/
.modal-image {
    
}

.content-slides:hover .modal-button {
    visibility: visible;
    opacity: 1; 
    transition: opacity 240ms ease-in-out;
}

.modal-button svg {
    height: 100%;
    width: 100%; 
}
.modal-button {
    visibility: hidden; 
    transition: 240ms ease-out;
    transition-delay: 100s;
    opacity: 0;
    position: absolute; 
    height: 36px; 
    width: 36px; 
    right: 10px; 
    top: 10px; 
    border: 0; 
    margin: 0; 
    background: rgba( 23, 35, 34, 0.75 );  
    border-radius: 0.5em;
    overflow: hidden; 
    cursor: pointer;
    outline: none; 
}

/*
.modal-button:hover {
    background: rgba( 23, 35, 34, 0.75 );  
    transition: background-color 240ms ease;
}
*/

.modal-button:not(:focus):hover {
    background-color: rgb(0, 173, 239);
}
.modal-box:hover .modal-label {
    transform: translateX(-3px);
    visibility: visible;
    opacity: 1; 
}

.modal-label {
    visibility: hidden; 
    transition: all 100ms ease-in-out;
    opacity: 0;
    
    visibility: hidden; 
    position: absolute; 
    height: 36px; 
    right: 50px; 
    top: 10px; 
    border: 0; 
    padding: 0 10px 0 10px; 
    
    border-radius: 2px;
    font-weight: bold; 
    font-size: 0.95em; 
    line-height: 36px; 
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial;
    background: rgba(23,35,34, .75);
    color: #fff;
}
.modal-label::after {
    position: absolute;
    margin-top: -.3em;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: .3em solid rgba(23,35,34, .75);
    right: -.3em;
    top: 50%;
    content: "";
}




.modal-title,
.modal-subtitle {
    position: absolute; 
    padding: 2px 4px 2px 4px; 
    font-family: "Helvetica Neue", Helvetica, Arial;
    background: rgba( 23, 35, 34, 0.75 );
    color: white; 
    left: 10px; 
}
.modal-title {
    height: 24px; 
    top: 10px;
}
.modal-subtitle {
    height: 14px; 
    top: 40px;
}
.modal-title a,
.modal-subtitle a {
    text-decoration: none; 
    color: rgb(0, 173, 239);
    font-weight: bold; 
}
.modal-title a:hover,
.modal-subtitle a:hover {
    color: #e63900; 
}
.modal-title h1 {
    margin: 0; 
    font-size: 1.3em; 
}
.modal-subtitle h2 {
    margin: 0; 
    font-size: 0.75em; 
    font-weight: normal; 
}


.modal-right,
.modal-left {
    cursor: pointer;
    position: absolute;
    font-weight: bold;
    font-size: 20px;
    
    padding: 16px;
    margin-top: -25px;
    
    border-radius: 0 3px 3px 0;
    transition: 0.6s ease;
    color: white;
    
    top: 50%;
    width: auto;
    
    -webkit-user-select: none;
    user-select: none;
}

.modal-left {
  left: 0;
    
}
.modal-right {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.modal-left:hover,
.modal-right:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

.modal-close {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    color: #8B0000;
    
    -webkit-user-select: none;
    user-select: none;
}
.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}


.body-div {
    padding: 0px; 
    padding-bottom: 68px;
    margin: 0 auto;
    max-width: 1250px;
}

.object-resume {
    height: 100%;
    width: 100%; 
    
}

.clip-div {
    margin: -10px 0 0 0;
}

.clip-input {
    opacity: 0; 
    position: absolute;
}

.svg-hidden {
    display: none; 
}

.svg-shown {
    display: inline-block; 
}

.svg-shown:hover {
  opacity: 0.7;
}

a:link.svg-link {
    text-decoration: none;
}



a.navbar-item {
    color: grey; 
}

a:link.navbar-item {
    text-decoration: none;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}


@media only screen and (max-width: 400px) {
    
    a.navbar-item {
        font-size: 0.8em;
    }
    
}


@media only screen and (max-width: 350px) {
    
    .content-video,
    .content-vimeo {
        width: 300px; 
    }
    
    .content-gallery {
    }
    
}

@media screen and (max-width:yourdevice-px) {
    @-ms-viewport{
        width:required-px;
    }
}